<template>
  <div class="todos-box">
    <p class="todo-title">TODOLIST</p>
    <div id="todo-list-example">
      <form class="addbar" v-show="isManager">
        <el-input
          v-model="newTodoText"
          id="new-todo"
          placeholder="E.g. Feed the cat"
          style="width:207px"
        ></el-input>
        <el-button type="plain" @click="addNewTodo" class="add-btn"
          >Add</el-button
        >
      </form>
      <div class="todolist">
        <ul>
          <!-- <li
            is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:key="todo.id"
            v-bind:title="todo.title"
            v-on:remove="todos.splice(index, 1)"
          ></li> -->
          <div
            v-for="(todo, index) in todos"
            v-bind:key="todo.id"
            class="todo-box"
          >
            <p>{{ index + 1 }}.{{ todo.title }}</p>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="remove(index, todo.id)"
              class="remove-btn"
              v-show="isManager"
            ></el-button>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.todos-box {
  width: 290px;
  min-height: 255px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding-bottom: 10px;
}

.todo-title {
  font-size: 18px;
  font-weight: bolder;
  padding-top: 5px;
  padding-bottom: 5px;
}

.todolist {
  margin: 8px;
  background: rgba(255, 255, 255, 0.829);
  height: 200px;
  overflow: auto;
  border-radius: 10px;
  margin-bottom: 10px;
}

.todo-box {
  font-size: 18px;
  font-weight: bolder;
  text-align: left;
  vertical-align: middle;
  margin: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background: rgba(255, 192, 203, 0.644);
  border-radius: 5px;
}

.todo-box p {
  display: inline-block;
  width: 195px;
}

.todo-box .remove-btn {
  display: inline-block;
}

.addbar {
  padding-left: 8px;
  padding-right: 8px;
  text-align: left;
}

#new-todo {
  display: inline-block;
}

.add-btn {
  display: inline-block;
}
</style>

<script>
export default {
  name: "Todos",
  props: ["title"],
  data() {
    return {
      isManager: true,
      newTodoText: "",
      todos: [
        {
          id: 1,
          title: "Do the dishes"
        },
        {
          id: 2,
          title: "Take out the trash"
        },
        {
          id: 3,
          title: "Mow the lawn"
        }
      ],
      nextTodoId: 4
    };
  },
  created: function() {
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/todo",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 0
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        that.todos = res.data.todos;
      },
      function(res) {
        console.log(res);
        console.log("啊呀，getTodo出错啦");
      }
    );
  },
  methods: {
    addNewTodo: function() {
      if (this.newTodoText != "") {
        let that = this;
        let qs = this.$qs;
        this.$http({
          url: "servlet/todo",
          method: "post",
          transformRequest: [
            function(data) {
              //在请求之前对data传参进行格式转换
              data = qs.stringify(data);
              return data;
            }
          ],
          data: {
            funcType: 1,
            todoItem: this.newTodoText
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
          }
        }).then(
          function(res) {
            console.log("添加"+that.newTodoText);
            that.todos = res.data.todos;
          },
          function(res) {
            console.log(res);
            console.log("啊呀，addTodo出错啦");
          }
        );
        this.newTodoText = "";
      }
    },
    remove(index, id) {
      var removeId = this.todos[index].id;
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/todo",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 2,
          removeId: removeId
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          that.todos.splice(index, 1);
          console.log(that.todos);
        },
        function(res) {
          console.log(res);
          console.log("啊呀，removeTodo出错啦");
        }
      );
      
    }
  }
};
</script>